<template>

  <div>
    <el-card>
      <el-form ref="form" :model="form" size="medium" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="99px" label="行政类别" prop="exetype">
              <el-select v-model="form.exeType" placeholder="请选择" clearable :style="{width: '90%'}">
                <el-option v-for="(item, index) in exeType" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="99px" label="机构名称" prop="orgname">
              <el-input v-model="form.orgName" clearable :style="{width: '90%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="组织机构代码" prop="orgcode">
              <el-input v-model="form.orgCode" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="99px" label="行政区类别" prop="areatype">
              <el-select v-model="form.areaType" placeholder="请选择" clearable :style="{width: '90%'}">
                <el-option v-for="(item, index) in areaType" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="99px" label="行政机构级别" prop="orglevel">
              <el-select v-model="form.orgLevel" placeholder="请选择" clearable :style="{width: '90%'}">
                <el-option v-for="(item, index) in orgLevel" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="success" @click="query(1)">检索</el-button>
            <el-button type="success" @click="back">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-row class="add_btn_row"><el-button type="primary" size="small" icon="el-icon-plus"
      @click="$router.push('/org/orgadd')">添加机构</el-button></el-row>
      <el-table :data="orglist"
                border style="width: 100%">
        <el-table-column  type="selection"  width="35">
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="机构Id"
          width="50">
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="机构名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="exeType"
          label="行政类别"
          width="110">
        </el-table-column>
        <el-table-column
          prop="orgPro"
          label="机构性质"
          width="150">
        </el-table-column>
        <el-table-column
          prop="areaType"
          label="行政区类别"
          width="100">
        </el-table-column>
        <el-table-column
          prop="orgLevel"
          label="机构行政级别"
          width="100">
        </el-table-column>
        <el-table-column
          prop="listingDate"
          label="挂牌日期"
          width="100">
        </el-table-column>
        <el-table-column
          prop="standaloneDate"
          label="独立运行日期"
          width="100">
        </el-table-column>
        <el-table-column
          prop="linkAdd"
          label="地址"
          width="100">
        </el-table-column>
        <el-table-column
          prop="areaCode"
          label="邮编"
          width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="160">
          <template slot-scope="scope">
            <!--slot-scope="scope" <el-button @click="handleClick(scope.row)" type="text" size="small">查看  </el-button>| -->
            <el-button  type="primary" round size="small" @click="handlekan(scope.row.id)">查看</el-button>
            <el-button  type="success" round size="small" @click="handleupdate(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" class="page-row" v-show="page_show">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>

  </div>
</template>

<script>
  import {post} from '@/utils/api'
  export default {
    data () {
      return {
        currentPage:1,
        total:20  ,//一共有多少条数据
        pagesize:6 , //每页显示多少条数据  页数等于  total/pagesize
        msg: '机构列表',
        formData:{},
        form:{},
        size: '',
        orglist:[],
        page_show:true, //分页插件是否显示，
        exeType: [{
          "label": "行政部门",
          "value": 1
        }, {
          "label": "卫生监督机构",
          "value": 2
        }, {
          "label": "协作单位",
          "value": "3"
        }], //行政类别
        areaType: [{
          "label": "省",
          "value": 1
        }, {
          "label": "市",
          "value": 2
        }, {
          "label": "县",
          "value": 3
        }, {
          "label": "区",
          "value": 4
        }],
        orgLevel: [{
          "label": "厅局级",
          "value": 1
        }, {
          "label": "副厅局级",
          "value": 2
        }, {
          "label": "处级",
          "value": 3
        }, {
          "label": "副处级",
          "value": 4
        }, {
          "label": "科级",
          "value": 5
        }, {
          "label": "副科级",
          "value": 6
        }, {
          "label": "副科级以下",
          "value": 7
        }, {
          "label": "未定级",
          "value": 8
        }],

      };
    },
    created() {
      this.getListByPage(1)
      // this.$axios.post("org/page",this.$qs.stringify({page:1,count:5})).then(
      //   res=>{
      //     console.log(res.data.data.records)
      //     this.orglist = res.data.data.records
      //   }
      // )
    },

    methods: {
      //async
      async getListByPage(page){
        let res = await post("org/page",{page: page, count: this.pagesize, ...this.form})
            console.log(res)
              //处理信息
            this.page_show = true
            let data = res.records
            this.orglist = data.map(item=>{
              if(item.exeType==1)
                item.exeType="卫生监督机构";
              if(item.exeType==2)
                item.exeType="行政部门";
              if(item.exeType==3)
                item.exeType="协作单位";
              if(item.orgPro==1)
                item.orgPro="行政机构、事业单位";
              if(item.orgPro==2)
                item.orgPro="全额拨款事业单位";
              if(item.orgPro==3)
                item.orgPro="差额拨款事业单位";
              if(item.orgPro==4)
                item.orgPro="自收自支事业单位";
              if(item.orgPro==5)
                item.orgPro="其他";
              if(item.areaType==1)
                item.areaType="省";
              if(item.areaType==2)
                item.areaType="市";
              if(item.areaType==3)
                item.areaType="县级市";
              if(item.areaType==4)
                item.areaType="县"
              if(item.areaType==5)
                item.areaType="区";
              if(item.orgLevel==1)
                item.orgLevel="厅局级";
              if(item.orgLevel==2)
                item.orgLevel="副厅局级";
              if(item.orgLevel==3)
                item.orgLevel="处级";
              if(item.orgLevel==4)
                item.orgLevel="副处级";
              if(item.orgLevel==5)
                item.orgLevel="科级";
              if(item.orgLevel==6)
                item.orgLevel="副科级";
              if(item.orgLevel==7)
                item.orgLevel="副科级以下";
              if(item.orgLevel==8)
                item.orgLevel="未定级";
              return item
            })
            // console.log(this.orglist)
            this.total = res.total
            // console.log(res.total)

      },
      handleCurrentChange(currentPage){
        //当前页码改变时触发
        // console.log(currentPage)
        this.currentPage = currentPage
        this.query(currentPage)
      },
      handlekan(id){
        this.$router.push({path:"orglistclick",query:{id:id}})
        console.log(id);
      },
      handleupdate(id){
        this.$router.push({name:"orgupdate",params:{id:id}})
        console.log(id);
      },
      async query(p){
        let res = await post("/org/getbycondition",{page:p,count:this.pagesize,...this.form})
        this.page_show = true
        let data = res.records
        this.orglist = data.map(item=>{
          if(item.exeType==1)
            item.exeType="行政部门";
          if(item.exeType==2)
            item.exeType="卫生监督机构";
          if(item.exeType==3)
            item.exeType="协作单位";
          if(item.orgPro==1)
            item.orgPro="行政机构、事业单位";
          if(item.orgPro==2)
            item.orgPro="全额拨款事业单位";
          if(item.orgPro==3)
            item.orgPro="差额拨款事业单位";
          if(item.orgPro==4)
            item.orgPro="自收自支事业单位";
          if(item.orgPro==5)
            item.orgPro="其他";
          if(item.areaType==1)
            item.areaType="省";
          if(item.areaType==2)
            item.areaType="市";
          if(item.areaType==3)
            item.areaType="县级市";
          if(item.areaType==4)
            item.areaType="县"
          if(item.areaType==5)
            item.areaType="区";
          if(item.orgLevel==1)
            item.orgLevel="厅局级";
          if(item.orgLevel==2)
            item.orgLevel="副厅局级";
          if(item.orgLevel==3)
            item.orgLevel="处级";
          if(item.orgLevel==4)
            item.orgLevel="副处级";
          if(item.orgLevel==5)
            item.orgLevel="科级";
          if(item.orgLevel==6)
            item.orgLevel="副科级";
          if(item.orgLevel==7)
            item.orgLevel="副科级以下";
          if(item.orgLevel==8)
            item.orgLevel="未定级";
          return item
        })
        // console.log(this.orglist)
        this.total = res.total
        // console.log(res.total)
        this.form = {}
      },
      back(){
        this.$router.go()
      }

    }
  }
</script>
<style>
  .add_btn_row{
    display: flex;
    justify-content: end;
    padding-bottom: 10px;
  }
  .box-card{
    margin: 10px;
  }
  .el-form{
    margin: 10px 10px 0px;
  }
  .el-pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
